<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${movie.name} + ' - 电影网站'"></title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">电影网站</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item" th:if="${session.user == null}">
                    <a class="nav-link" href="/login">登录</a>
                </li>
                <li class="nav-item dropdown" th:if="${session.user != null}">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        <span th:text="${session.user.username}"></span>
                        <span class="badge bg-warning" th:if="${session.user.isVip}">VIP</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/order/vip" th:if="${!session.user.isVip}">开通VIP</a></li>
                        <li><a class="dropdown-item" href="/admin" th:if="${session.user.isAdmin}">后台管理</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8">
            <!-- 播放器区域 -->
            <div class="ratio ratio-16x9 mb-4" th:if="${session.user != null and canPlay}">
                <video controls th:src="@{'/movie/play/' + ${movie.id}}"></video>
            </div>

            <div th:if="${session.user == null}" class="alert alert-info">
                <h4 class="alert-heading">需要登录</h4>
                <p>请先登录才能观看影片</p>
                <hr>
                <a href="/login" class="btn btn-primary">去登录</a>
            </div>

            <div class="alert alert-warning" th:if="${session.user != null and !canPlay}">
                <h4 class="alert-heading">VIP专享内容</h4>
                <p>这是VIP专享影片，开通VIP即可观看所有影片。</p>
                <hr>
                <a href="/order/vip" class="btn btn-warning">立即开通VIP</a>
            </div>

            <!-- 电影信息 -->
            <div class="card mb-4">
                <div class="card-body">
                     <!-- 管理员专属按钮 -->
                    <div th:if="${session.user != null && session.user.isAdmin}" class="mb-3">
                        <a th:href="@{'/admin/export/movie/' + ${movie.id} + '/play'}" class="btn btn-primary me-2">导出播放记录</a>
                        <a th:href="@{'/admin/export/movie/' + ${movie.id} + '/comment'}" class="btn btn-primary">导出评论记录</a>
                    </div>
                    <h2 class="card-title" th:text="${movie.name}"></h2>
                    <div class="d-flex align-items-center mb-3">
                        <span th:each="category : ${movie.categories}" class="badge bg-primary me-2" th:text="${category}"></span>
                        <span class="badge bg-success me-2" th:text="'评分: ' + ${movie.score}"></span>
                        <span class="text-muted" th:text="'播放次数: ' + ${movie.playCount}"></span>
                    </div>
                    <p class="card-text" th:text="${movie.description}"></p>
                    <div class="mt-3">
                        <strong>导演：</strong>
                        <span th:each="director, iterStat : ${directors}">
                            <a th:href="@{'/movie/director/' + ${director.id}}" class="text-decoration-none" th:text="${director.name}"></a>
                            <span th:if="${!iterStat.last}">, </span>
                        </span>
                    </div>
                    <div class="mt-2">
                        <strong>主演：</strong>
                        <span th:each="actor, iterStat : ${actors}">
                            <a th:href="@{'/movie/actor/' + ${actor.id}}" class="text-decoration-none" th:text="${actor.name}"></a>
                            <span th:if="${!iterStat.last}">, </span>
                        </span>
                    </div>
                    <div class="mt-2">
                        <strong>上映时间：</strong>
                        <span th:text="${#dates.format(movie.releaseDate, 'yyyy-MM-dd')}"></span>
                    </div>
                </div>
            </div>

            <!-- 主创其他作品 -->
            <div class="card mb-4">
                <div class="card-header">导演其他作品</div>
                <div class="card-body">
                    <div class="row row-cols-2 row-cols-md-4 g-4">
                        <div class="col" th:each="m : ${directorMovies}">
                            <div class="card h-100">
                                <img th:src="${m.coverUrl}" class="card-img-top" alt="电影封面">
                                <div class="card-body">
                                    <h6 class="card-title" th:text="${m.name}"></h6>
                                    <p class="card-text small">
                                        <span class="badge bg-success" th:text="'评分: ' + ${m.score}"></span>
                                    </p>
                                </div>
                                <div class="card-footer p-0">
                                    <a th:href="@{'/movie/detail?id=' + ${m.id}}" class="btn btn-link btn-sm w-100">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">主演其他作品</div>
                <div class="card-body">
                    <div class="row row-cols-2 row-cols-md-4 g-4">
                        <div class="col" th:each="m : ${actorMovies}">
                            <div class="card h-100">
                                <img th:src="${m.coverUrl}" class="card-img-top" alt="电影封面">
                                <div class="card-body">
                                    <h6 class="card-title" th:text="${m.name}"></h6>
                                    <p class="card-text small">
                                        <span class="badge bg-success" th:text="'评分: ' + ${m.score}"></span>
                                    </p>
                                </div>
                                <div class="card-footer p-0">
                                    <a th:href="@{'/movie/detail?id=' + ${m.id}}" class="btn btn-link btn-sm w-100">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <!-- 评论区域 -->
            <div class="card mb-4">
                <div class="card-header">评论区</div>
                <div class="card-body">
                    <!-- 评论表单 -->
                    <form th:if="${session.user != null}" th:action="@{'/movie/comment'}" method="post" class="mb-4">
                        <input type="hidden" name="movieId" th:value="${movie.id}">
                        <div class="mb-3">
                            <label for="score" class="form-label">评分</label>
                            <select class="form-select" id="score" name="score" required>
                                <option value="5">5分 - 非常好</option>
                                <option value="4">4分 - 很好</option>
                                <option value="3">3分 - 一般</option>
                                <option value="2">2分 - 较差</option>
                                <option value="1">1分 - 很差</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="comment" class="form-label">评论内容</label>
                            <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交评论</button>
                    </form>

                    <!-- 评论列表 -->
                    <div class="list-group">
                        <div th:each="rating : ${ratings}" class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-1" th:text="${rating.user.username}"></h6>
                                <small class="text-muted" th:text="${#dates.format(rating.createTime, 'yyyy-MM-dd HH:mm')}"></small>
                            </div>
                            <div class="mb-1">
                                <span class="badge bg-success" th:text="'评分: ' + ${rating.score}"></span>
                            </div>
                            <p class="mb-1" th:text="${rating.comment}"></p>
                        </div>
                    </div>

                    <!-- 未登录提示 -->
                    <div th:if="${session.user == null}" class="alert alert-info">
                        <p>请登录后发表评论</p>
                        <a href="/login" class="btn btn-primary">去登录</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排行榜 -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">本周热播</div>
                <div class="list-group list-group-flush">
                    <a th:each="m : ${weeklyRanking}" th:href="@{'/movie/' + ${m.id}}" 
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span th:text="${m.name}"></span>
                        <span class="badge bg-primary rounded-pill" th:text="${m.playCount}"></span>
                    </a>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">本月热播</div>
                <div class="list-group list-group-flush">
                    <a th:each="m : ${monthlyRanking}" th:href="@{'/movie/' + ${m.id}}"
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span th:text="${m.name}"></span>
                        <span class="badge bg-primary rounded-pill" th:text="${m.playCount}"></span>
                    </a>
                </div>
            </div>

            <!-- 热度趋势图 -->
            <div class="card mb-4">
                <div class="card-header">热度趋势</div>
                <div class="card-body">
                    <div id="ratingTrend" style="height: 300px;"></div>
                </div>
            </div>

            <!-- 评分分布图 -->
            <div class="card">
                <div class="card-header">评分分布</div>
                <div class="card-body">
                    <div id="ratingDistribution" style="height: 300px;"></div>
                </div>
            </div>
            <!-- 关系图谱 -->
            <div class="card mb-4">
                <div class="card-header">关系图谱</div>
                <div class="card-body">
                    <div id="relationGraph" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script th:inline="javascript">
    // 获取电影数据
    var movie = [[${movie}]];
    var directors = [[${directors}]];
    var actors = [[${actors}]];
    var directorMovies = [[${directorMovies}]];
    var actorMovies = [[${actorMovies}]];

    // 初始化关系图谱
    var relationChart = echarts.init(document.getElementById('relationGraph'));

    // 构建节点数据
    var nodes = [
        {
            name: movie.name,
            value: movie.name,
            category: 0,
            symbolSize: 60,
            itemStyle: {
                color: '#FFD700'
            }
        }
    ];

    var links = [];
    var categories = [
        { name: '导演' },
        { name: '演员其他作品' },
        { name: '当前电影' },
        { name: '演员' },
        { name: '导演其他作品' }
    ];

    // 添加导演节点和关系
    directors.forEach(function(director) {
        nodes.push({
            name: director.name,
            value: director.name,
            category: 1,
            symbolSize: 45,
            itemStyle: {
                color: '#4169E1'
            }
        });
        links.push({
            source: director.name,
            target: movie.name,
            lineStyle: {
                color: '#000',
                width: 2
            }
        });

        // 添加导演的其他电影
        directorMovies.forEach(function(m) {
            if (m.id !== movie.id) {
                nodes.push({
                    name: m.name,
                    value: m.name,
                    category: 3,
                    symbolSize: 30,
                    itemStyle: {
                        color: '#87CEEB'
                    }
                });
                links.push({
                    source: director.name,
                    target: m.name,
                    lineStyle: {
                        color: '#000',
                        width: 2
                    }
                });
            }
        });
    });

    // 添加演员节点和关系
    actors.forEach(function(actor) {
        nodes.push({
            name: actor.name,
            value: actor.name,
            category: 2,
            symbolSize: 45,
            itemStyle: {
                color: '#FF6B6B'
            }
        });
        links.push({
            source: actor.name,
            target: movie.name,
            lineStyle: {
                color: '#000',
                width: 2
            }
        });

        // 添加演员的其他电影
        actorMovies.forEach(function(m) {
            if (m.id !== movie.id) {
                nodes.push({
                    name: m.name,
                    value: m.name,
                    category: 4,
                    symbolSize: 30,
                    itemStyle: {
                        color: '#FFB6C1'
                    }
                });
                links.push({
                    source: actor.name,
                    target: m.name,
                    lineStyle: {
                        color: '#000',
                        width: 2
                    }
                });
            }
        });
    });

    var option = {
        title: {
            text: '电影关系网络',
            top: 'top',
            left: 'center'
        },
        tooltip: {
            formatter: function(params) {
                if (params.dataType === 'node') {
                    return params.data.category === 0 ? '当前电影: ' + params.name :
                        params.data.category === 1 ? '导演: ' + params.name :
                            params.data.category === 2 ? '演员: ' + params.name :
                                params.data.category === 3 ? '导演其他作品: ' + params.name :
                                    '演员其他作品: ' + params.name;
                }
                return params.name;
            }
        },
        legend: {
            data: categories.map(function(a) {
                return a.name;
            }),
            top: 'bottom',
            textStyle: {
                color: '#333'
            }
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
            name: '关系网络',
            type: 'graph',
            layout: 'force',
            data: nodes,
            links: links,
            categories: categories,
            roam: true,
            label: {
                show: true,
                position: 'right',
                formatter: '{b}'
            },
            force: {
                repulsion: 1000,
                edgeLength: [80, 200]
            }
        }]
    };
    relationChart.setOption(option);

    // 窗口大小改变时重绘图表
    window.addEventListener('resize', function() {
        trendChart.resize();
        distributionChart.resize();
        relationChart.resize();
    });
</script>
<script th:inline="javascript">
    // 获取评分数据
    var ratings = [[${ratings}]];

    // 处理评分数据
    var dates = [];
    var scores = [];
    var distribution = [0, 0, 0, 0, 0]; // 1-5分的分布

    ratings.forEach(function(rating) {
        dates.push(rating.createTime);
        scores.push(rating.score);
        distribution[rating.score - 1]++;
    });

    // 初始化评分趋势图表
    var trendChart = echarts.init(document.getElementById('ratingTrend'));
    var trendOption = {
        title: {
            text: '评分趋势',
            textStyle: {
                color: '#333',
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                return params[0].name + '<br/>' +
                    params[0].seriesName + ': ' + params[0].value + '分';
            }
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 5,
            splitNumber: 5
        },
        series: [{
            name: '评分',
            type: 'line',
            data: scores,
            smooth: true,
            itemStyle: {
                color: '#FFD700'
            },
            lineStyle: {
                color: '#FFD700',
                width: 3
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 215, 0, 0.5)'
                }, {
                    offset: 1,
                    color: 'rgba(255, 215, 0, 0.1)'
                }])
            },
            symbol: 'circle',
            symbolSize: 8
        }]
    };
    trendChart.setOption(trendOption);

    // 初始化评分分布图表
    var distributionChart = echarts.init(document.getElementById('ratingDistribution'));
    var distributionOption = {
        title: {
            text: '评分分布',
            textStyle: {
                color: '#333',
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}分: {c}人 ({d}%)'
        },
        series: [{
            name: '评分分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}分: {c}人'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            },
            data: [
                {value: distribution[0], name: '1', itemStyle: {color: '#FFE4B5'}},
                {value: distribution[1], name: '2', itemStyle: {color: '#FFD700'}},
                {value: distribution[2], name: '3', itemStyle: {color: '#FFA500'}},
                {value: distribution[3], name: '4', itemStyle: {color: '#FF8C00'}},
                {value: distribution[4], name: '5', itemStyle: {color: '#FF4500'}}
            ]
        }]
    };
    distributionChart.setOption(distributionOption);


    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        trendChart.resize();
        distributionChart.resize();
        relationChart.resize();
    });
</script>
</body>
</html>